<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能电子商城 - 设备自适应演示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f7fa;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            background-color: #2c3e50;
            color: white;
            padding: 15px 0;
            position: relative;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
        }

        nav ul {
            list-style: none;
            display: flex;
            justify-content: center;
            margin-top: 15px;
        }

        nav li {
            margin: 0 15px;
        }

        nav a {
            color: white;
            text-decoration: none;
            font-weight: bold;
        }

        .mobile-menu-btn {
            display: none;
            position: absolute;
            right: 20px;
            top: 20px;
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
        }

        .banner {
            background-color: #3498db;
            color: white;
            padding: 40px 20px;
            text-align: center;
            margin-bottom: 30px;
        }

        .products {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

        .product-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            transition: transform 0.3s ease;
        }

        .product-card:hover {
            transform: translateY(-5px);
        }

        .product-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 5px;
            margin-bottom: 15px;
        }

        .product-card h3 {
            margin-bottom: 10px;
            color: #2c3e50;
        }

        .product-card .price {
            font-weight: bold;
            color: #e74c3c;
            margin-bottom: 15px;
        }

        .product-card .btn {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #3498db;
            color: white;
            text-align: center;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
        }

        .features {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

        .feature-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            text-align: center;
        }

        .feature-card i {
            font-size: 40px;
            color: #3498db;
            margin-bottom: 15px;
        }

        footer {
            background-color: #2c3e50;
            color: white;
            padding: 30px 0;
            text-align: center;
        }

        .device-info {
            background-color: #ecf0f1;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 5px;
            text-align: center;
        }

        /* 移动设备样式 */
        @media (max-width: 768px) {
            .mobile-menu-btn {
                display: block;
            }

            nav ul {
                display: none;
                flex-direction: column;
                align-items: center;
            }

            nav ul.show {
                display: flex;
            }

            nav li {
                margin: 10px 0;
            }

            .products {
                grid-template-columns: repeat(2, 1fr);
            }

            .features {
                grid-template-columns: 1fr;
            }

            .product-card img {
                height: 150px;
            }

            .desktop-only {
                display: none;
            }
        }

        /* 桌面设备特有样式 */
        .desktop-only {
            display: block;
        }

        .mobile-only {
            display: none;
        }

        /* 移动设备特有样式 */
        @media (max-width: 768px) {
            .desktop-only {
                display: none;
            }

            .mobile-only {
                display: block;
            }
        }
    </style>
</head>

<body>
    <div class="device-info" id="device-info"></div>

    <header>
        <div class="container">
            <div class="logo">智能电子商城</div>
            <button class="mobile-menu-btn mobile-only">☰</button>
            <nav>
                <ul id="main-menu">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">产品</a></li>
                    <li><a href="#">优惠</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <div class="banner">
        <div class="container">
            <h1>欢迎来到智能电子商城</h1>
            <p>根据您的设备类型，我们为您提供最佳的购物体验</p>
        </div>
    </div>

    <div class="container">
        <div class="products" id="products-container">
            <!-- 产品将通过JavaScript动态加载 -->
        </div>

        <div class="features">
            <div class="feature-card">
                <i>🚚</i>
                <h3>免费配送</h3>
                <p>所有订单均享受免费配送服务</p>
            </div>
            <div class="feature-card">
                <i>🔄</i>
                <h3>30天退换</h3>
                <p>30天内无理由退换商品</p>
            </div>
            <div class="feature-card">
                <i>🔒</i>
                <h3>安全支付</h3>
                <p>多种安全支付方式可选</p>
            </div>
        </div>

        <div class="desktop-only">
            <h2>桌面设备专享功能</h2>
            <p>在桌面设备上，您可以享受更多高级功能和详细的产品信息展示。</p>
            <div id="desktop-features"
                style="margin: 20px 0; padding: 20px; background-color: #e8f4fc; border-radius: 5px;">
                <h3>高级筛选</h3>
                <p>使用我们的高级筛选功能，根据多种条件快速找到您需要的产品。</p>
                <h3>产品对比</h3>
                <p>同时对比多个产品的详细规格和性能参数。</p>
                <h3>360°产品展示</h3>
                <p>使用鼠标拖动查看产品的各个角度。</p>
            </div>
        </div>

        <div class="mobile-only">
            <h2>移动设备专享功能</h2>
            <p>在移动设备上，我们提供了触摸友好的界面和简化的购物流程。</p>
            <div id="mobile-features"
                style="margin: 20px 0; padding: 20px; background-color: #fff0e8; border-radius: 5px;">
                <h3>快速购买</h3>
                <p>一键购买功能，简化下单流程。</p>
                <h3>位置服务</h3>
                <p>查找附近的实体店和自提点。</p>
                <h3>扫码比价</h3>
                <p>扫描商品条码，快速比较价格。</p>
            </div>
        </div>
    </div>

    <footer>
        <div class="container">
            <p>&copy; 2023 智能电子商城 - 根据您的设备提供最佳体验</p>
        </div>
    </footer>

    <script>
        // 设备类型检测函数
        const detectDeviceType = () =>
            /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
                navigator.userAgent
            )
                ? 'Mobile'
                : 'Desktop';

        // 获取设备类型
        const deviceType = detectDeviceType();

        // 显示设备信息
        document.getElementById('device-info').innerHTML = `
            <strong>当前设备类型:</strong> ${deviceType}<br>
            <strong>用户代理:</strong> ${navigator.userAgent}
        `;

        // 根据设备类型调整UI和功能
        function adjustUIForDeviceType() {
            // 产品数据
            const products = [
                { id: 1, name: '智能手机 Pro', price: '¥4999', image: 'https://placehold.co/300x200?text=智能手机' },
                { id: 2, name: '超薄笔记本', price: '¥6999', image: 'https://placehold.co/300x200?text=笔记本' },
                { id: 3, name: '智能手表', price: '¥1999', image: 'https://placehold.co/300x200?text=智能手表' },
                { id: 4, name: '无线耳机', price: '¥999', image: 'https://placehold.co/300x200?text=无线耳机' },
                { id: 5, name: '智能音箱', price: '¥599', image: 'https://placehold.co/300x200?text=智能音箱' },
                { id: 6, name: '平板电脑', price: '¥3999', image: 'https://placehold.co/300x200?text=平板电脑' },
                { id: 7, name: '游戏主机', price: '¥2999', image: 'https://placehold.co/300x200?text=游戏主机' },
                { id: 8, name: '智能摄像头', price: '¥399', image: 'https://placehold.co/300x200?text=智能摄像头' }
            ];

            const productsContainer = document.getElementById('products-container');

            // 根据设备类型决定显示的产品数量
            const productsToShow = deviceType === 'Mobile' ? 4 : products.length;

            // 加载产品
            for (let i = 0; i < productsToShow; i++) {
                const product = products[i];
                const productCard = document.createElement('div');
                productCard.className = 'product-card';

                productCard.innerHTML = `
                    <img src="${product.image}" alt="${product.name}">
                    <h3>${product.name}</h3>
                    <div class="price">${product.price}</div>
                    <button class="btn">${deviceType === 'Mobile' ? '一键购买' : '加入购物车'}</button>
                `;

                productsContainer.appendChild(productCard);
            }



            // 移动设备菜单切换
            if (deviceType === 'Mobile') {
                const menuBtn = document.querySelector('.mobile-menu-btn');
                const mainMenu = document.getElementById('main-menu');

                menuBtn.addEventListener('click', function () {
                    mainMenu.classList.toggle('show');
                });
            }

            // 记录用户设备信息（实际应用中可能会发送到服务器进行分析）
            console.log('用户设备信息:', {
                deviceType: deviceType,
                userAgent: navigator.userAgent,
                screenWidth: window.innerWidth,
                screenHeight: window.innerHeight,
                timestamp: new Date().toISOString()
            });
        }

        // 页面加载完成后调整UI
        window.addEventListener('DOMContentLoaded', adjustUIForDeviceType);
    </script>
</body>

</html>